<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<jsp:include page="common.jsp" ></jsp:include>
<link rel="stylesheet" href="${base}/final/css/layui.css" media="all">
</head>
<body>
	<!-- 中间的数据列表 -->
<div style="padding: 20px; background-color: white;">
  <div class="layui-row layui-col-space15">
   <div class="layui-col-xs10">
      <div class="layui-card">
        <div class="layui-card-header"><i class="layui-icon">&#xe62a;</i> 数据列表</div>
      </div>
    </div>
    <div class="layui-col-xs">
    	<button type="button" class="layui-btn">
		  <i class="layui-icon">&#xe608;</i> 添加
		</button>
    </div>
  </div>
</div> 
<!-- 表格，里面的lay-filter  -->
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!-- 操作按钮 -->
<script type="text/html" id="bar1">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 设置按钮 -->
<script type="text/html" id="bar2">
  <a class="layui-btn layui-btn-xs" lay-event="uplevel">查看上一级</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="downlevel">查看下一级</a>
</script>
<script src="${base}/final/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/final/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.config({
  version: '1566370370424' //为了更新 js 缓存，可忽略
});
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  

  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  dateArr='{"code":0,"msg":"","count":1000,"data":}';  
  //执行一个 table 实例
  table.render({
	id:'idTest'
    ,elem: '#demo'
    ,height: 420
    ,url: '${base}/finalCategoryServlet.do?method=findAllCate' //数据接口
    //,data:{"code":0,"msg":"","count":1000,"data":[{"id":'1',"name":'111',"level":'1',"sex":'男',"shownav":'1',"show":'2'}]}
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      ,{field: 'id', title: '编号',sort: true,}
      ,{field: 'name', title: '分类名称',}
      ,{field: 'level', title: '级别', totalRow: true,templet:function(data){
    	  if(data.parent_id==0){
    		  
    		  return "一级";
    	  }else{
    		  return "二级";
    	  }
      }}
      ,{field: 'shownav', title: '导航栏', totalRow: true,templet:function(data){
    	  if(data.shownav==0){
    		  return "显示";
    	  }else{
    		  return "不显示";
    	  }
      }}
      ,{field: 'status', title: '是否显示',templet:function(data){
    	  if(data.status==0){
    		  return "显示";
    	  }else{
    		  return "不显示";
    	  }
      }} 
      ,{field: 'wealth', title: '设置',toolbar: '#bar2'}
      ,{fixed: 'right', title:'操作', align:'center', toolbar:'#bar1'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'edit'){
      layer.msg('编辑操作');
      //通过servle中转，还是直接跳转？？
      location.href="${base}/finalCategoryServlet.do?method=preupdate&data="+data.id
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){

        layer.close(index);
        //向服务端发送删除指令
        $.post("${base}/finalCategoryServlet.do",{'method':'delCate','cid':data.id},function(data){
        	if(data="ok"){
        		obj.del(); //删除对应行（tr）的DOM结构
        	}else{
        		layer.msg("删除失败")
        	}
        })
      });
    } else if(layEvent === 'uplevel'){
    	alert(data.parent_id)
    	if(data.parent_id==0){
      		layer.msg('已经是最顶级');
    	}else{
    		table.reload('idTest',{
				url: '${base}/finalCategoryServlet.do'
				,where: { //设定异步数据接口的额外参数，任意设
				"method":'findAllCate'
				}
				,page: {
					curr: 1 //重新从第 1 页开始
				}
			}); //只重载数据
    	}
    } else if(layEvent === 'downlevel'){
    	if(data.parent_id==0){
	    	  table.reload('idTest',{
				url: '${base}finalCategoryServlet.do'
				,where: { //设定异步数据接口的额外参数，任意设
				"method": 'findChildByPid'
				,"parentid":data.id
				}
				,page: {
					curr: 1 //重新从第 1 页开始
				}
			}); //只重载数据
	    	  
    	}else{
    		layer.msg('到底了！')
    	}
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2018-08-28': '新版'
      ,'2018-10-08': '神秘'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
      console.log(res)
    }
  });
  
  slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });

});
</script>
</body>
</html>